<template>
  <div class="parkPictureWrap" ref="parkPictureWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="0">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">区域:</span>
                <span class="searchInputFont">
                  <el-select style="width: 100%;" v-model="searchInfo.parentId" :disabled="$store.state.userInfo.regionId?true:false" @change="changeDistrict(searchInfo.parentId)" size="mini" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业:</span>
                <span class="searchInputFont">
                  <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="selectGovAreaMap" clearable placeholder="全部">
                    <el-option
                      v-for="item in this.$store.state.companyInfos"
                      :key="item.enterpriseNo+''"
                      :label="item.enterpriseName"
                      :value="item.enterpriseNo+''">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     v-model="searchInfo.statisTime"
                     @change="selectGovAreaMap"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     :clearable="false"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期"
                     :picker-options="pickerOptions1">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">类型:</span>
                <span class="searchInputFont">
                  <el-radio-group size="mini" v-model="searchInfo.areaType" @change="selectGovAreaMap()">
                    <el-radio-button v-for="(item,index) in typeList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
                  </el-radio-group>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="mapContentWrap">
        <mapBicycletest
          :parentId="searchInfo.parentId"
          :mapInfolist="mapInfolist"
          :streetData="streetData"
          :searchInfo="searchInfo"
          :hours="hours"
          ref="mapFun"
          @selectGovAreaMap="selectGovAreaMap"
        ></mapBicycletest>
      </div>
    </div>
  </div>
</template>

<script>
  import mapBicycletest from "./mapHotMavp.vue"
  import bikeData from '../../../store/data'
  export default {
    props: [],
    data(){
      return {
        searchInfo: {
          "enterpriseNo": '',
          "parentId": this.$store.state.userInfo.regionId || '',
          "regionId": '',
          "statisTime": '',
          "areaType": '1'
        },
        typeList: [
          {
            value: '1',
            label: '停放热力图'
          },
          {
            value: '2',
            label: '开锁热力图'
          },
          {
            value: '3',
            label: '关锁热力图'
          }
        ],
        streetData: [],
        number: 0,//标记当前请求次数
        hours: [],
        times: [],
        timer: '',
        over: 0,
        mapInfolist: [],
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    components: {
      mapBicycletest
    },
    created(){
      this.searchInfo.statisTime = this.dtime().format('YYYY-MM-DD')
      //获取首次数据
      if (this.$store.state.userInfo.regionId) {
        this.changeDistrict(this.searchInfo.parentId)
      } else {
        this.selectGovAreaMap()
      }
    },
    destroyed(){
      clearTimeout(this.timer)
      this.over = 1
    },
    methods: {
      //改变行政区 获取街道
      changeDistrict(parentId){
        this.searchInfo.regionId = ''
        if (!parentId) {
          this.streetData = []
          this.selectGovAreaMap()
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: parentId})
          .then(response => {
          const result = response.data
          if (result.code == 200) {
            this.streetData = result.result
            this.selectGovAreaMap()
          }
        })
      },

      getTimes(){
        let dayNow = this.dtime().format('YYYY-MM-DD'), timeNow = this.dtime().format('HH') - 0
        for (var i = 0; i < (this.searchInfo.statisTime == dayNow ? (timeNow + 1) : 24); i++) {
          this.times.push(this.searchInfo.statisTime + (i < 10 ? ' 0' : ' ') + i)
          this.hours.push((i < 10 ? ' 0' : ' ') + i)
        }
      },

      getHotData(index, number){
        let url = this.searchInfo.areaType==1 ? 'parkSweatDrawing' : this.searchInfo.areaType==2 ? 'openLockSweatDrawing' : 'closeLockSweatDrawing'
        this.axios.post(process.env.API_HOST + `/show/${url}`, 
          {regionCode: this.searchInfo.parentId, comId: this.searchInfo.enterpriseNo, id: this.times[index]}
        ).then(response => {
          const result = response.data
          this.searchInfo.parentId=this.searchInfo.parentId?this.searchInfo.parentId:''

          let enterpriseNo = result.result.comId ? result.result.comId:'',
              parentId     = result.result.regionCode ? result.result.regionCode:'', 
              time         = result.result.time ? result.result.time:''
          if(this.searchInfo.parentId != parentId || this.searchInfo.enterpriseNo != enterpriseNo || this.number != number){// || this.times[index] != time // 接口问题暂时不判断
            return
          }
          if (result.code == 200 && result.result && result.result.pointList.length>0) {
            this.mapInfolist.push(result.result.pointList)
            //this.hours.push((index < 10 ? '0' : '') + index)//初始全时间
            if(index==0){// 激活第一个时间点
              this.$refs.mapFun.mapvSet(result.result.pointList)
              // this.$refs.mapFun.mapAction(true)//开始播放
            }
          }

          if(index < this.times.length-1 && this.over==0){
            index++
            this.timer = setTimeout(() => {
              this.getHotData(index, number)
            }, 200)
          }
        })
      },
      // 加载数据
      selectGovAreaMap(){
        clearTimeout(this.timer)
        this.number     += 1

        this.hours       = []
        this.times       = []
        this.mapInfolist = []
        this.getTimes()
        this.areaPoints()
        this.getHotData(0, this.number)
      },

      areaPoints(){//行政区
        if (this.searchInfo.parentId) {
          this.$store.state.districtData.forEach(item => {
            if (this.searchInfo.parentId == item.id) {
              setTimeout(() => {
                this.$refs.mapFun.showAreaPoints(JSON.parse(item.regionPoints))
              }, 200)
            }
          })
        } else {
          setTimeout(() => {
            this.$refs.mapFun.showAreaPoints()
          }, 200)
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .parkPictureWrap
    page()
    .mapContentWrap
      position absolute;
      left 0px;
      right 0px
      bottom 0px
      top 78px
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: white;
</style>